<template>
    <Row class="list_contents" style="height: 100%">
        <Sider width="240" class="bcf" collapsed-width="0" hide-trigger collapsible v-model="closeSide">
<!--            左侧筛选栏 mini start -->
            <div class="pos-a flcc bc13" style="width: 50px;height: auto;top: 0;right: -50px;z-index: 999">
                <div v-show="!closeSide">
                    <Button type="text" size="large" icon="md-arrow-forward" shape="circle" @click="closeSide = !closeSide" v-show="closeSide"></Button>
                    <Button type="text" size="large" icon="md-arrow-back" shape="circle" @click="closeSide = !closeSide" v-show="!closeSide"></Button>
                </div>
                <Affix>
                    <div v-show="closeSide">
                        <ButtonGroup vertical>
                            <Button type="primary" size="large" icon="md-arrow-forward" shape="circle" @click="closeSide = !closeSide"></Button>
                            <Button type="primary" size="large" icon="md-add" shape="circle" to="/admin/__DIR__/__EN_NAME__/edit"></Button>
                            <Button type="primary" size="large" icon="md-copy" shape="circle" @click="copy()"></Button>
                            <Button type="primary" size="large" icon="ios-trash-outline" shape="circle" @click="remove()"></Button>
                            <Button type="primary" size="large" icon="md-refresh" shape="circle" @click="refresh"></Button>
                        </ButtonGroup>
                    </div>
                </Affix>
            </div>
<!--            左侧筛选栏 mini end -->

<!--            左侧筛选栏 start -->
            <Card :title="!closeSide?'列表管理':''" dis-hover :bordered="false">
                <div class="listLeft">
                    <div class="flrc row bdda martb3">
                        <div class="flex1 title"><Button type="text" long to="/admin/m/MMM/edit">新增记录</Button></div>
                        <div class="padlr9"><Button shape="circle" type="primary" icon="md-add" size="small" to="/admin/__DIR__/__EN_NAME__/edit"></Button></div>
                    </div>
                    <div class="flrc row bdda martb3">
                        <div class="flex1 title"><Button type="text" @click="remove()" long>批量删除</Button></div>
                        <div class="padlr9"><Button shape="circle" @click="remove()" type="primary" icon="ios-trash-outline" size="small"></Button></div>
                    </div>
                    <div class="flrc row bdda martb3">
                        <div class="flex1 title"><Button type="text" @click="copy()" long>批量复制</Button></div>
                        <div class="padlr9"><Button shape="circle" @click="copy()" type="primary" icon="md-copy" size="small"></Button></div>
                    </div>
                    <div v-if="searchBoxConfig !== false">
                        <div class="flrc row bdda mart3">
                            <div class="flex1 title tac">条件检索</div>
                            <div class="pad9"><i-switch v-model="showSearch" slot="extra"></i-switch></div>
                        </div>
                        <div class="bdbda bdlda bdrda padt5" v-show="showSearch">
                            <Data v-model="searchBox" :config="searchBoxConfig"></Data>
                            <div class="flrc padb5"><Button @click="resetSearchBox()"><Icon type="md-repeat" /><span class="padlr9">重置</span></Button></div>
                        </div>
                    </div>
                    <div v-if="editBoxConfig !== false">
                        <div class="flrc row bdda martb3" v-show="editBoxConfig.items.length">
                            <div class="flex1 title tac">批量编辑</div>
                            <div class="pad9"><i-switch v-model="showEdit" slot="extra"></i-switch></div>
                        </div>
                        <div class="bdbda bdlda bdrda padt3" v-show="showEdit && editBoxConfig.items.length">
                            <Data v-model="editBox" :config="editBoxConfig"></Data>
                            <div class="flrc padb5"><Button @click="resetEditBox()"><Icon type="md-repeat" /><span class="padlr9">重置</span></Button></div>
                        </div>
                    </div>
                </div>
            </Card>
<!--            左侧筛选栏 end -->

        </Sider>
        <Col style="padding: 0 20px 0 70px;overflow-y: auto;overflow-x: hidden" class="flex1">
<!--            标题搜索 start -->
            <Card shadow>
                <div class="flrc">
                    <div class="flex1">{{modelName}}</div>
                    <div><Input search enter-button placeholder="搜索" @on-search="getList" /></div>
                </div>
            </Card>
<!--            标题搜索 end -->

            <Card class="mart10" shadow style="width: 100%">
                <Table row-key="id" :data="data" :columns="headers" @on-selection-change="onSelectChange">
                    <template slot="name" slot-scope="{row}">
                        {{row.name}}
                    </template>
                    <template slot="action"  slot-scope="{row}">
                        <Button :to="'/admin/__DIR__/__EN_NAME__/edit?id=' + row.id"  icon="md-create"></Button>
                        <Dropdown >
                            <Button icon="md-more"></Button>
                            <div slot="list" >
                                <Button type="text" @click="copy([row.id])">
                                    <Icon size="14" type="ios-browsers" />
                                    <span class="padl10">复制</span>
                                </Button>
                                <Button type="text" @click="remove([row.id])">
                                    <Icon size="14" type="md-trash" />
                                    <span class="padl10">删除</span>
                                </Button>
                            </div>
                        </Dropdown>
                    </template>
                </Table>
                <div class="pad10 " :key="reloadKey">
                    <Page show-sizer :page-size-opts="[10,15,20,50,100]" show-total
                          @on-change="getList" @on-page-size-change="setPageSize"
                          :page-size="list.limit" :current="list.page === 0?1:list.page" :total="list.total"></Page>
                </div>
            </Card>
            <!--            //模态窗口 start // -->
            <div>
                <Modal v-model="showForm">

                </Modal>
            </div>
            <!--            //模态窗口 end // -->
        </Col>
    </Row>
</template>

<script>
    import config from './list'
    import Data from "../../../../ez/from/Data";
    export default {
        name: "admin_list_auto__DIR____EN_NAME__",
        components: {Data},
        data() {
            return {
                //基本数据
                modelName: "",
                //左侧工具栏
                closeSide: true,
                //查询构建器
                showSearch: true,
                showEdit: true,

                //接口数据
                list:config.list(),
                //筛选器
                searchBox: config.searchBoxData,
                searchBoxConfig: config.searchBox(),
                //筛选器
                editBox: config.editBoxData,
                editBoxConfig: config.editBox(),

                //表格数据
                headers:config.listConfig(),
                data: [],
                selected: [],
                //模态窗口编辑
                showForm:false,

                reloadKey:"",
            }
        },
        mounted() {
            let modelName = this.$route.query.en
            this.modelName = modelName
            this.getList()
            // this.copy = config.action().copy
            // this.remove = config.action().remove
        },
        methods:{
            copy:function (ids) {
                console.log(ids)
                if (ids === undefined)ids = this.selected
                console.log(ids)
                config.action().copy(ids,this.getList)
            },
            remove:function (ids) {
                console.log(ids)
                if (ids === undefined)ids = this.selected
                console.log(ids)
                config.action().remove(ids,this.getList)
            },
            resetSearchBox(){
                this.searchBox = {}
                config.searchBoxData = this.searchBox
            },
            resetEditBox(){
                this.editBox = {}
            },
            getList(page){
                console.log(page)
                if (page !== undefined)this.list.setPage(page)
                this.list.getList((data,query)=>{
                    this.data = data
                    console.log(query)
                    this.list.page=query.page
                    this.list.total=query.total
                    this.list.limit=query.limit
                    this.reloadKey = this.createRnd()
                })
            },
            setPageSize(size){
                this.list.setPageSize(size)
                this.getList()
            },
            onSelectChange(items){
                console.log(items)
                let ids = []
                for (let item of items){
                    ids.push(item.id)
                }
                this.selected=ids
            },
            refresh(){
              this.list.init()
              this.getList(1)
                this.reloadKey = this.createRnd()
            },
        },
        watch: {
            '$route'(to) {
                this.modelName = to.query.en
            },
            searchBox:{
                deep:true,
                handler(v){
                    console.log(v)
                }
            }
        }
    }
</script>

<style>
    .listLeft .row {

    }

    .listLeft .row .title {
        padding: 5px;
    }

    ::-webkit-scrollbar {
        /*display: none*/
    }
</style>
